<template>
    
  <div class="main-container">
    <el-button @click="handleBatchDelete">批量删除</el-button>
    <el-table
        :data="userData"
        border
        
        :header-cell-style="{ color: 'black', 'background-color': '#f5f7f9' }"
        @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
            v-for="item in userDataLabel"
            align="center"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
            :width="item.width ? item.width : 80"
        >
        <template #default="{ row }" v-if="item.prop === 'avatar'">
              <div style="display: flex; justify-content: center; align-items: center;">
                <img :src="row.avatar" alt="发布者头像" style="width: 50px; height: 30px; object-fit: cover;">
              </div>
            </template>
            <template #default="{ row }" v-if="item.prop === 'sex'">
              <div v-if="row.sex==1" style="display: flex; justify-content: center; align-items: center;">
                男
              </div>              
              <div v-else style="display: flex; justify-content: center; align-items: center;">
                女
              </div>
            </template>
            <template #default="{ row }" v-if="item.prop === 'status'">
              <div v-if="row.status==1" style="display: flex; justify-content: center; align-items: center;">
                普通用户
              </div>              
              <div v-else style="display: flex; justify-content: center; align-items: center;">
                管理员
              </div>
            </template>
            <template #default="{ row }" v-if="item.prop === 'online'">
              <div v-if="row.online==1" style="display: flex; justify-content: center; align-items: center;">
                在线
              </div>              
              <div v-else style="display: flex; justify-content: center; align-items: center;">
                不在线
              </div>
            </template>
      </el-table-column>
      <el-table-column label="操作">
          <template #default="{ row }">
            <div class="action-column">
              <el-button @click="handleDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
    </el-table>

    <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="pagination.pageNo"
          :current-page="pagination.pageNo"
          :page-size="pagination.pageSize"
          layout="total,prev, pager, next"
          :total="pagination.total"
        >
        </el-pagination>
    </div>

</div>
</template>

<script setup>
  import { ref,onMounted } from 'vue';
  import { getUserListAPI,delUserAPI,delUserSAPI} from '../../../../api/admin.js'
  import { ElMessage } from 'element-plus';
const selectedRows = ref([]);
const userDataLabel = ref([
  {
    prop: 'id',
    label: '用户id',
    width: 100,
    sortable: true
  },
  {
    prop: 'account',
    label: '用户账号',
    width: 100,
    sortable: true
  },
  {
    prop: 'name',
    label: '用户名字',
    width: 100,
    sortable: true
  },
  // {
  //   prop: 'password',
  //   label: '用户密码',
  //   width: 100,
  //   sortable: true
  // },
  {
    prop: 'avatar',
    label: '用户头像',
    width: 100,
    sortable: true
  },
  {
    prop: 'sex',
    label: '用户性别',
    width: 100,
    sortable: true
  },
  {
    prop: 'status',
    label: '用户权限',
    width: 100,
    sortable: true
  },
  {
    prop: 'online',
    label: '在线状态',
    width: 100,
    sortable: true
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 100,
    sortable: true
  },
  {
    prop: 'updateTime',
    label: '修改时间',
    width: 100,
    sortable: true
  },
]);
const userData = ref([]);
const pagination = ref({
  pageNo: 1,
  pageSize: 15,
  total: 0,
});
const handleDelete = async(row) => {
  try{
    const response = await delUserAPI({userId:row.id});
      // console.log(response.data);
      if (response.data.code === 0) {
            ElMessage.success('帖子删除成功');
            await fetchUserList(); 
        } else {
           ElMessage.error('帖子删除失败');
        }
  }catch(error){
    ElMessage.error('网络请求出错，请稍后重试: ' + (error.message || '未知错误'));
  }
  
};
const handleSelectionChange = (rows) => {
    selectedRows.value = rows;
  };
const handleBatchDelete = async () => {
    if (selectedRows.value.length === 0) {
      console.log('请选择要删除的');
      return;
    }
    const ids = selectedRows.value.map(row => row.id.toString()).join(',');
    try {
      const response = await delUserSAPI({ids});
      if (response.data.code==0) {
        // 从表格数据中移除已删除的行
        // userData.value = userData.value.filter(item =>!ids.includes(item.userId));
    await fetchUserList();
        console.log('批量删除成功');
      } else {
        console.error('批量删除失败:', response.message);
      }
    } catch (error) {
      console.error('批量删除失败:', error);
    }
};
const handleSizeChange = async (newSize) => {
  pagination.value.pageSize = newSize;
  pagination.value.pageNo = 1;
  await fetchUserList();
};
const handleCurrentChange = async (newPage) => {
  pagination.value.pageNo = newPage;
  await fetchUserList();
};
const fetchUserList = async () => {
  try {
    let param = {
      pageNo: pagination.value.pageNo,
      pageSize: pagination.value.pageSize
    };
    const response = await getUserListAPI(param);
    // console.log(response.data);
    userData.value = response.data.data.list
    pagination.value.total = response.data.data.total;
   } catch (error) {
    console.error('获取帖子列表失败:', error);
  }
};
const handleExamine = async (row) => {
  try {
        // 调用更新状态接口，将 status 设为 0 表示审核通过
        let params={
            userId:row.id,
            status:0
        }
       const response = await updateuserStatusAPI(params)
       // console.log(response.data);
        if (response.data.code === 0) {
            // 从表格数据中移除该帖子记录
            userData.value = userData.value.filter(item => item.id!== row.id);
            // 更新总数据量
            pagination.value.total--;
            ElMessage.success('审核通过，该帖子已从列表移除');
        } else {
            ElMessage.error('审核失败: ' + response.data.message);
        }
    } 
    catch (error) {
        ElMessage.error('操作发生错误: ' + error.message);
    }
};
onMounted(async () => {
    await fetchUserList();
});
</script>

<style lang="less" scoped>
.main-container{
    height: calc(100% - 64px);
    // height: 100%;
    // background-color: aqua;
  }
  .el-table {
      // overflow-y: scroll;
      height: 100%;
      // background-color: red;
      .action-column {
        display: flex;
        flex-wrap: nowrap;
        /* 确保按钮不换行 */
        white-space: nowrap;
        /* 防止按钮内的文本换行 */
      }
  }
  .pagination-container {
    display: flex;
    // background-color: rgb(55, 224, 21);
    justify-content: center;
    // margin-top: 20px;
  }
</style>